<template>
    <div style="width:100%;height:100% ;">
      <div class="aside">
        <span>输入栅格纵向数量</span>
        <el-input v-model="input" ></el-input>
        <el-button type="primary" @click="start">开始</el-button>
        <el-button type="primary" @click="random">随机生成路障</el-button>
        <br>
        <br>
        <div>
          <span>当前点击坐标{{x}},{{y}}</span>
        </div>
        <div>
          <span>当前坐标阻塞值</span>
          <el-input v-model="stopnum"  @change="stopNumChange"></el-input>
        </div>
        <br>
        <br>
        <div>
          <span>当前出发点{{startx}},{{starty}}</span>
          <el-button type="primary" @click="initstart">设置当前为出发点</el-button>
        </div>
        <br>
        <div>
          <span>当前终点{{endx}},{{endy}}</span>
          <el-button type="primary" @click="initend">设置当前为终点</el-button>
        </div>
        <br>
        <br>
        <el-button type="primary" @click="madehoetroad">开始计算最短路径</el-button>
      </div>
          <div class="box">
                <div   v-for="(item,index) in list" :key="index">
                      <div  :id= "`div${index},${i}`"
                            class="cell"
                            :style="{'width':width+'px','height':width+'px'}"
                            @click="click(index,i)"
                            @mouseenter="mouseenter(index,i)"
                            @mouseleave="mouseleave(index,i)"
                            v-for="(element,i) in item"
                            :key="i">
                      </div>
                </div>
          </div>
          <div class="left">

          </div>
    </div>
</template>
<script>
import API from '../api/gepath/getpath'
export default {
  data () {
    return {
      list: [],
      width: 60,
      input: 10,
      x: 0,
      y: 0,
      stopnum: 0,
      startx: -1,
      starty: -1,
      endx: -1,
      endy: -1,
      cocoltransfer: ''
    }
  },
  created () {
    this.init()
  },

  methods: {
    init () {
      let num = Number(this.input)
      this.list = new Array(num).fill(1).map((item, i) => {
        return new Array(num).fill(1).map((el, j) => {
          return {
            i: 1,
            x: i,
            y: j
          }
        })
      })
    },
    start () {
      this.width = 600 / this.input
      this.clear()
      this.init()
    },

    clear () {
      if (this.list) {
        this.list.forEach(el => {
          el.forEach(element => {
            document.getElementById('div' + element.x + ',' + element.y).style.backgroundColor = '#FFFFFF'
          })
        })
      }
      this.list.splice(0)
      this.x = 0
      this.y = 0
      this.stopnum = 0
      this.startx = -1
      this.starty = -1
      this.endx = -1
      this.endy = -1
      this.cocoltransfer = ''
    },

    random () {
      this.list.forEach(el => {
        el.forEach(element => {
          if (Math.random() < 0.3) {
            element.i = 999
            this.changecocol(element.x, element.y)
          }
        })
      })
    },
    stopNumChange () {
      let a = this.x
      let b = this.y
      this.list[a][b].i = this.stopnum
      this.changecocol(a, b)
    },
    changecocol (a, b) {
      let num = Number(this.list[a][b].i)
      switch (true) {
        case (num === 1):
          document.getElementById('div' + a + ',' + b).style.backgroundColor = '#FFFFFF'
          break
        case (num > 1 && num <= 5):
          document.getElementById('div' + a + ',' + b).style.backgroundColor = '#7FFFD4'
          break
        case (num > 5 && num <= 10):
          document.getElementById('div' + a + ',' + b).style.backgroundColor = '#1E90FF'
          break
        case (num > 10 && num <= 15):
          document.getElementById('div' + a + ',' + b).style.backgroundColor = '#FFD700'
          break
        case (num > 15 && num <= 20):
          document.getElementById('div' + a + ',' + b).style.backgroundColor = '#FF8C00'
          break
        case (num > 20 && num <= 25):
          document.getElementById('div' + a + ',' + b).style.backgroundColor = '#FF0000'
          break
        case (num === 999):
          document.getElementById('div' + a + ',' + b).style.backgroundColor = 'black'
          break
      }
      this.setColorToStartEnd()
      this.$forceUpdate()
    },
    initstart () {
      this.startx = this.x
      this.starty = this.y
      this.setColorToStartEnd()
    },
    initend () {
      this.endx = this.x
      this.endy = this.y
      this.setColorToStartEnd()
    },
    setColorToStartEnd () {
      if (this.startx !== -1) {
        document.getElementById('div' + this.startx + ',' + this.starty).style.backgroundColor = '#7FFF00'
        document.getElementById('div' + this.endx + ',' + this.endy).style.backgroundColor = '#8B4513'
      }
    },
    click (a, b) {
      this.x = a
      this.y = b
      this.stopnum = this.list[a][b].i
    },
    getpath (e) {
      e.forEach(element => {
        document.getElementById('div' + element.x + ',' + element.y).style.backgroundColor = '#7FFF00'
      })
    },
    madehoetroad () {
      var that = this
      let parms = {
        list: this.list,
        start: that.list[that.startx][that.starty],
        end: that.list[that.endx][that.endy]
      }
      API.getpathlist(parms).then(res => {
        if (res === '') {
          alert('没有找到')
        } else {
          that.getpath(res)
        }
      })
    },
    mouseenter (a, b) {
      this.cocoltransfer = document.getElementById('div' + a + ',' + b).style.backgroundColor
      document.getElementById('div' + a + ',' + b).style.backgroundColor = '#B0C4DE'
    },
    mouseleave (a, b) {
      document.getElementById('div' + a + ',' + b).style.backgroundColor = this.cocoltransfer
    }
  }
}
</script>

<style>
.cell{
    border-style: solid;
    border-width: 1px;
    text-align: center;
    /* margin:5px;
    background-color: red; */
}
.box{
    width:600px;
    height:600px;
    display: flex;
    position: absolute;
    left: 350px;
    top: 100px;
}
.el-input {
  width: 150px;
}

.aside{
  padding-left: 50px;
  width: 300px;
  height: 400px;
  position: absolute;
  top: 150px;
}
.left{
    width: 250px;
    height: 400px;
    position: absolute;
    top: 150px;
    left: 1140px;
}
</style>
